<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function ajax_test() {
            // 1获取 XMLHttpRequest对象
            var xmlhr;
            // 判断浏览器是否支持 XMLHttpRequest
            if (window.XMLHttpRequest) {
                xmlhr = new XMLHttpRequest();
            } else {
                // 支持 IE5,IE6
                xmlhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // 2.建立与服务端的连接并发送数据
            xmlhr.open("GET", "data/ajax.json", true)
            xmlhr.open("POST", "data/ajax.json", true)
            xmlhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            // 必须要发送
            xmlhr.send()

            //3. 获取服务端的数据并处
            xmlhr.onreadystatechange = function () {
                // 判断服务端 status 同时判断发送状态
                if (xmlhr.status == 200 && xmlhr.readyState == 4) {
                    // var jsonObj = eval("(" + xmlhr.responseText + ")");
                    console.log(xmlhr.response)
                    let jsonObj = JSON.parse(xmlhr.responseText.toString())

                    document.getElementById("h2").innerText = jsonObj.username + "的密码是：" + jsonObj.password
                }
            }
        }

    </script>
</head>
<body>

<h2 id="h2">AJAX</h2>
<button type="button" onclick="ajax_test()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>
